<template>
  <div class="cinema">
    <ul class="yeye">
      <li>全城
        <i class="fa fa-caret-down"></i>
      </li>
      <li>品牌
        <i class="fa fa-caret-down"></i>
      </li>
      <li>特色
        <i class="fa fa-caret-down"></i>
      </li>
    </ul>
    <div class="list">
      <ul>
        <li v-for='item in cinemaList' :key='item.id'>
          <p>
            <span>{{item.name}}</span>
            <span class="price">{{item.price}}</span>
            <span class="price-desc">元起</span>
          </p>
          <p class="address"> 
            <span>{{item.address}}</span>
            <span>>{{item.distance}}</span>
          </p>
           <p class="tips"> 
            <span>小吃</span>
            <span>折扣卡</span>
          </p>
          </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name:'Cinema',
  methods:{
   getCinemaData(){
     this.$axios.get('/mock/api.json')
  .then( (response)=>{
    console.log(response);
    if(response.status==200){
      if(response.data&&response.data.cinemaList){
        this.cinemaList=response.data.cinemaList
      }
    }
  })
  .catch( (error) =>{
    console.log(error);
  });
   }
  },
  created(){
    this.getCinemaData()
    },
  data() {
       return {
          cinemaList:[]
       }
 },

}
</script>

<style>
 .cinema .yeye li{
   margin-top: 50px;
   display: inline-block;
   width: 33%;
   text-align: center;
   font-weight: 500;
   height: 40px;
   line-height: 40px;
  border-bottom: 1px solid #ccc;
 }
 .list li{
   padding: 10px;
   border-bottom: 1px solid #ccc;
 }
 .price{
   color:#E54747;
   margin:0px 5px;
 }
 .price-desc{
   color:#E54747;
    font-size: 12px;
 }
 .address span{
   font-size: 12px;
   color: #999;
 }
 .address span:last-child{
   float: right;
 }
 .tips span{
   border:1px solid #f90;
   color: #f90;
 }
 .tips{
   margin: 10px 0;
 }
</style>